<template>
  <div class="infinite-container get-number">
    <template v-if="list.length > 0">
    <div class="appoint-card" v-for="(item, index) in list" :key="index">
      <div class="appoint-card-header clearfix">
        <span class="title">{{item.doctorName}}</span> <small class="t3">{{item.departmentName}}</small>
        <div class="fr t5">
          <span v-if="item.orderStatus === 1" class="t5">{{ORDER_STATUS[item.orderStatus]}}</span>
          <span v-else class="t1">{{ORDER_STATUS[item.orderStatus]}}</span>
        </div>
      </div>
      <div class="appoint-card-content">
        <p><i class="iconfont icon-user"></i> <span class="t3">就诊人</span>{{item.patientName}}（{{item.patientMedicalCardNumber || '未办卡'}}）</p>
        <p><i class="iconfont icon-shijian"></i> <span class="t3">时间</span> {{item.scheduleDate | format}} {{item.beginTime|getHourMinites}}-{{item.endTime | getHourMinites}}</p>
      </div>
      <div class="appoint-card-footer">
        <span v-if="item.payStatus === 1" class="t5">未支付</span>
        <span v-else-if="item.payStatus === 2" class="t3">已支付</span>
        <span v-else class="t3">已挂账</span>
        <div class="fr mt10">
          <mu-raised-button class="small reverse no-shadow" primary label="查看挂号单" v-if="item.orderStatus===2" @click="viewOrder(item)"/>
          <mu-raised-button class="small no-shadow" primary label="签到取号" @click="reAppoint(item)" v-if="item.orderStatus === 1"/>
          <mu-raised-button class="small no-shadow" primary label="查看队列"  @click="viewDetail(item)" v-if="item.orderStatus === 2"/>
        </div>
      </div>        
    </div>
    </template>
    <empty v-else></empty>
    <mu-dialog :open="dialog" title="">
          <div class="f12">
            <div><span class="t3">挂号科室 </span><span>{{selectedItem.departmentName}}</span></div>
            <div class="mt6"><span class="t3">挂号医生 </span><span>{{selectedItem.doctorName}}</span></div>
            <div class="mt6"><span class="t3">挂号费 </span><span>{{selectedItem.regFee | fixedMoney}}</span></div>
            <div class="mt6"><span class="t3">就诊时间 </span><span>{{selectedItem.scheduleDate | format}} {{selectedItem.beginTime|getHourMinites}}-{{selectedItem.endTime | getHourMinites}}</span></div>
            <div class="mt6"><span class="t3">就诊人 </span><span>{{selectedItem.patientName}}</span></div>
            <div class="mt6">
              <span class="t3">账户余额 </span>
              <span class="t5">{{selectedItem.accountBalance | fixedMoney}}</span>
              <span class="t5" v-show="showAccount">（余额不足，请充值）</span>
            </div>
          </div>
          <div class="login center">
            <mu-flat-button class="btn-login mt20" slot="actions" @click="dialog=false" label="取消" />
            <mu-flat-button class="btn-login mt20" slot="actions" @click="payHandle" primary label="去充值" v-if="showAccount"/>
            <mu-flat-button class="btn-login mt20" slot="actions" @click="confirmHandle" primary label="确认取号"  v-else/>
          </div>
        </mu-dialog>

        <mu-dialog :open="tipDialog">
          当前就诊人尚未办卡，请到医院自助机或窗口进行办卡就诊。
           <mu-flat-button class="mt20" slot="actions" @click="tipDialog=false" primary label="确定"  />
        </mu-dialog> 
  </div>
</template>

<script>
import {commonAjax, RESTFUL_API} from '@/api/api'
import {PAY_STATUS_ORDER} from '@/api/const'
import empty from '@/components/empty'
export default {
  components: {empty},
  data () {
    return {
      list: [],
      PAY_STATUS: PAY_STATUS_ORDER,
      ORDER_STATUS: ['', '未取号', '已取号'],
      dialog: false,
      tipDialog: false,
      selectedItem: {}
    }
  },
  mounted () {
    this.getList()
    // this.getLocationH5()
  },
  computed: {
    showAccount () {
      return this.selectedItem.accountBalance - this.selectedItem.regFee < 0
    }
  },
  methods: {
    getList () {
      this.$store.commit('UPDATE_LOADING')
      commonAjax(RESTFUL_API.listTakeNumber, {[this.$APP_PLATFORM_NAME]: sessionStorage[this.$APP_PLATFORM_NAME]}, true).then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.code === 1) {
          this.list = res.data.data
        } else {
          this.$store.commit('UPDATE_TOAST', {message: res.data.message})
        }
      })
    },
    signIn () {
      // todo
    },
    getRandon (min = 0, max = 1) {
      return (Math.round(Math.random() * (max - min)) + min)
    },
    reAppoint (item) {
      this.selectedItem = item
      if (!item.patientMedicalCardNumber) {
        this.tipDialog = true
        return
      }
      this.dialog = true
    },
    payHandle () {
      this.$router.push('/inpatient-care/prePayHand')
    },
    confirmHandle () {
      // todo
      commonAjax(RESTFUL_API.signIn, {hisOrderNumber: this.selectedItem.hisOrderNumber}, true)
      .then(res => {
        this.dialog = false
        if (res.data.code === 1) {
          window.location.reload()
        } else {
          this.$store.commit('UPDATE_TOAST', {
            message: res.data.message,
            timeout: 2500
          })
        }
      })
    },
    viewDetail (item) {
      this.$router.push('/mainWait')
    },
    viewOrder (item) {
      this.$router.push({
        path: '/appointment/viewOrder',
        query: {
          hisOrderNumber: item.hisOrderNumber,
          invoiceNumber: item.invoiceNumber
        }
      })
    },
    getLocationH5 () {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(this.showPosition, this.showError)
      } else {
        this.$store.commit('UPDADTE_TOAST', {message: '浏览器不支持地理定位'})
      }
    },
    showPosition (position) {
      let lat = position.coords.latitude
      let lag = position.coords.longitude
      console.log(lat + '\n' + lag)
    },
    showError (error) {
      switch (error.code) {
        case error.PERMISSION_DENIED:
          console.log('定位失败，用户拒绝请求地理定位')
          break
        case error.TIMEOUT:
          console.log('定位失败，请求超时')
          break
        case error.UNKNOWN_ERROR:
          console.log('定位失败，未知错误')
          break
      }
    }
  }
}
</script>

<style lang="less">
@import '../../common/css/vars.less';
  .get-number {
    .appoint-card {
      background: #fff;
      margin-bottom: 10px;
      padding: 1em;
      border: 1px solid @color-border;
      overflow: auto;
      .appoint-card-header {
        margin-bottom: 1em;
        .title {
          color: @color-primary;
          font-size: 1.2em;
          padding-right: .6em;
        }
      }
      .appoint-card-content {
        padding: 8px 0;
        border-top: 1px solid #f2f2f2;
        border-bottom: 1px solid #f2f2f2;
        a {
          color: #333;
        }
        p {
          margin: .7em 0;
        }
        .iconfont {
          color: @color-primary;
          font-size: 1em
        }
      }
      .appoint-card-footer {
        overflow: auto;
        span{
          line-height: 3;
        }
      }

    }
    .appoint-card.theme-gray {
      color: @color-gray;
      a, .iconfont, .title{color: @color-gray;}
    }
  }
.feeText{
  color:@color-feeText
}
.feeTextBig{
  color:@color-feeText;
  font-size:20px;
}
</style>

